import './css/index.css';
import ajax from './js/ajax';
//const baseUrl='https://service-dmsf9bxc-1251395798.gz.apigw.tencentcs.com/release'
const baseUrl = 'http://127.0.0.1:7001';
let bigImg, timer;
function getBigImg(bigImg, ul, img) {
    //todo渲染轮播图
    for (let i = 0; i < bigImg.length; i++) {
        ul.innerHTML += `<li data-i="${i}"></li>`;
        let pic = document.createElement('img');
        img.appendChild(pic);
        pic.dataset.i = i;
        if (i > 0) {
            setTimeout(() => {
                //延后加载其他图片
                pic.src = bigImg[i];
            }, 70);
        } else pic.src = bigImg[i];
    }
}
ajax({
    // todo 大图
    baseUrl,
    url: '/api/web/carouselGroup/get',
    method: 'GET',
    data: { carouselGroupId: 9, projectId: 16 },
    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
})
    .then((res) => {
        //console.log(res)
        let arr = res.data.w_carousels;
        bigImg = arr.map((o) => {
            let url;
            for (const key in o) if (key === 'url') url = o[key];
            return url;
        });
        sessionStorage.setItem('bannerlist', JSON.stringify(bigImg));
        let img = document.querySelector('.pic>.img');
        let ul = document.querySelector('.pic>ul');
        getBigImg(bigImg, ul, img);
        let pic = document.querySelector('.pic');
        let lastIndex = 0,
            index = 1;
        setTimeout(() => {
            //等图片加载完
            img.insertBefore(
                img.lastElementChild.cloneNode(true),
                img.firstElementChild
            );
            img.appendChild(img.children[1].cloneNode(true));
            img.style.transition = 'none';
            img.style.transform = 'translate(-100%)';
            setTimeout(() => {
                img.style.transition = 'transform 2s';
            }, 100);
            for (let i = 0; i < ul.children.length; i++) {
                //!点击圆点
                ul.children[i].addEventListener('click', () => {
                    ul.children[lastIndex].style.backgroundColor = '#dedcdc';
                    ul.children[i].style.backgroundColor = '#1088F2';
                    img.style.transform = 'translate(-' + (i + 1) + '00%)';
                    index = i + 1;
                    lastIndex = i;
                });
            }
        }, 70);
        function f() {
            //!圆点随图片改变
            ul.children[lastIndex].style.backgroundColor = '#dedcdc';
            ul.children[index - 1].style.backgroundColor = '#1088F2';
            lastIndex = index - 1;
        }
        function f1() {
            //!自动轮播
            timer = setInterval(() => {
                img.style.transform = 'translate(-' + ++index + '00%)';
                if (index > img.children.length - 2) {
                    index = 1;
                    img.addEventListener(
                        'transitionend',
                        () => {
                            img.style.transition = 'none';
                            img.style.transform = 'translate(-100%)';
                            window.getComputedStyle(img).transform;
                            img.style.transition = 'transform 2s';
                        },
                        { once: true }
                    );
                }
                f();
            }, 2000);
        }
        f1();
        pic.addEventListener('mouseenter', () => {
            //移入停止轮播
            clearInterval(timer);
        });
        pic.addEventListener('mouseleave', () => {
            //移出继续自动轮播
            f1();
        });
        document.addEventListener('visibilitychange', () => {
            //界面不显示时不轮播
            if (document.hidden) clearInterval(timer); //判断网页是否被隐藏
            else {
                clearInterval(timer); //防止定时器叠加,鼠标移出也会触发定时器
                f1();
            }
        });
    })
    .catch((err) => console.log(err));
function getData(arr) {
    //todo 获取需要的数据,arr是对象数组
    return arr.map((o) => {
        let obj = {};
        obj.src = o.cover;
        obj.title = o.name;
        obj.equipment = o.sketch;
        let s = o.content;
        obj.name = s.substring(s.indexOf('>') + 1, s.lastIndexOf('<')); //作者名
        return obj;
    });
}
function render(data, kind, start, end) {
    //todo:渲染数据
    for (let i = start; i < end; i++) {
        let eye = Math.ceil(Math.random() * 1000);
        let good = Math.ceil(Math.random() * 500);
        let img = document.createElement('img');
        img.style['background-color'] = '#999';
        let con = document.querySelector(`.${kind}>.look>.con`);
        con.style.width = 1220 * Math.ceil(end / 4) - 20 + 'px';
        let imgName = con.children[i].children[0];
        imgName.innerText = data[i].title;
        let span = con.children[i].children[1];
        let evaluate = con.children[i].children[2];
        let time = con.children[i].children[3];
        img.width = 285;
        img.height = 190;
        if (i < 4) img.src = data[i].src;
        else {
            //懒加载
            setTimeout(() => (img.src = data[i].src), 1500);
        }
        let mess = document.createElement('div');
        mess.className = 'mess';
        con.children[i].insertBefore(img, con.children[i].children[0]);
        con.children[i].insertBefore(mess, con.children[i].children[1]);
        mess.appendChild(imgName);
        mess.appendChild(span);
        let span1 = document.createElement('span');
        span1.innerText = data[i].equipment;
        mess.appendChild(span1);
        mess.appendChild(evaluate);
        evaluate.children[1].innerText = eye;
        evaluate.children[3].innerText = good;
        mess.appendChild(time);
        time.children[0].innerText = data[i].name;
    }
}
function point(data, ul) {
    //todo 生成小圆点
    for (let i = 0; i < Math.ceil(data.length / 4); i++) {
        let li = document.createElement('li');
        ul.appendChild(li);
    }
}
function change(data, con, ul, kind) {
    //todo 切换页面
    let last = 0;
    let flag = false; //第二页未加载
    for (let i = 0; i < Math.ceil(data.length / 4); i++) {
        ul.children[i].addEventListener('click', () => {
            if (!flag && i > 0) {
                render(data, kind, 4 * i, 4 * (i + 1));
                flag = true;
            }
            if (last != i) {
                ul.children[last].style.backgroundColor = '#dedcdc';
                ul.children[i].style.backgroundColor = '#1088F2';
                con.style.transform = 'translate(' + -i * 1220 + 'px)';
                last = i;
            }
        });
    }
}
ajax({
    // todo 自然
    baseUrl,
    url: '/api/web/classify/getById',
    method: 'GET',
    data: { id: 21, projectId: 16 },
    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
})
    .then((res) => {
        //console.log(res)
        let arr = res.data.w_cases;
        let data = getData(arr);
        let con = document.querySelector('.nature>.look >.con');
        let ul = document.querySelector('.nature>.title>.more>ul');
        point(data, ul);
        setTimeout(() => {
            //懒加载
            render(data, 'nature', 0, 4);
            change(data, con, ul, 'nature');
        }, 500);
    })
    .catch((err) => console.log(err));
ajax({
    // todo 城市
    baseUrl,
    url: '/api/web/classify/getById',
    method: 'GET',
    data: { id: 25, projectId: 16 },
    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
})
    .then((res) => {
        let arr = res.data.w_cases;
        let data = getData(arr);
        let con = document.querySelector('.city>.look >.con');
        let ul = document.querySelector('.city>.title>.more>ul');
        // eslint-disable-next-line no-unused-vars
        let all = document.querySelector('.all');
        point(data, ul);
        setTimeout(() => render(data, 'city', 0, 4), 700);
        change(data, con, ul, 'city');
    })
    .catch((err) => console.log(err));
ajax({
    // todo 运动
    baseUrl,
    url: '/api/web/classify/getById',
    method: 'GET',
    data: { id: 30, projectId: 16 },
    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
})
    .then((res) => {
        let arr = res.data.w_cases;
        let data = getData(arr);
        let con = document.querySelector('.sport>.look >.con');
        let ul = document.querySelector('.sport>.title>.more>ul');
        point(data, ul);
        setTimeout(() => render(data, 'sport', 0, 4), 700); //懒加载
        change(data, con, ul, 'sport');
    })
    .catch((err) => console.log(err));
ajax({
    // todo 人物
    baseUrl,
    url: '/api/web/classify/getById',
    method: 'GET',
    data: { id: 37, projectId: 16 },
    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
})
    .then((res) => {
        let arr = res.data.w_cases;
        let data = getData(arr);
        let con = document.querySelector('.person>.look >.con');
        let ul = document.querySelector('.person>.title>.more>ul');
        point(data, ul);
        setTimeout(() => render(data, 'person', 0, 4), 700); //懒加载
        change(data, con, ul, 'person');
    })
    .catch((err) => console.log(err));
ajax({
    // todo 签约摄影师
    baseUrl,
    url: '/api/web/classify/getById',
    method: 'GET',
    data: { id: 56, projectId: 16 },
    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
})
    .then((res) => {
        let arr = res.data.w_cases;
        let data = getData(arr);
        let con = document.querySelector('.cameraman>.look >.con');
        let ul = document.querySelector('.cameraman>.title>.more>ul');
        point(data, ul);
        setTimeout(() => render(data, 'cameraman', 0, 4), 700); //懒加载
        change(data, con, ul, 'cameraman');
    })
    .catch((err) => console.log(err));
function render1(data, con, start, end) {
    //todo渲染热门标签
    for (let i = start; i < end; i++) {
        let li = document.createElement('li');
        con.appendChild(li);
        let img = document.createElement('img');
        img.src = data[i].src;
        img.width = 183;
        img.height = 122;
        li.appendChild(img);
        let p = document.createElement('p');
        p.innerText = data[i].title;
        li.appendChild(p);
    }
}
ajax({
    // todo 热门标签
    baseUrl,
    url: '/api/web/classify/getById',
    method: 'GET',
    data: { id: 59, projectId: 16 },
    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
})
    .then((res) => {
        let arr = res.data.w_cases;
        let data = getData(arr);
        let ul = document.querySelector('.hot>.title>.more>ul');
        let con = document.querySelector('.hot>.look>ul');
        for (let i = 0; i < Math.ceil(data.length / 6); i++) {
            //生成小圆点
            let li = document.createElement('li');
            ul.appendChild(li);
        }
        setTimeout(() => render1(data, con, 0, 6), 1000);
        let last = 0;
        let flag = false; //第二页未加载
        for (let i = 0; i < Math.ceil(data.length / 6); i++) {
            ul.children[i].addEventListener('click', () => {
                if (!flag && i > 0) {
                    con.style.width = 1220.4 * (i + 1) - 20.4 + 'px';
                    render1(data, con, 6 * i, 6 * (i + 1));
                    flag = true;
                }
                if (last != i) {
                    ul.children[last].style.backgroundColor = '#dedcdc';
                    ul.children[i].style.backgroundColor = '#1088F2';
                    con.style.transform = 'translate(' + -i * 1220 + 'px)';
                    last = i;
                }
            });
        }
    })
    .catch((err) => console.log(err));
